<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>场次信息 - 前台仪表盘</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            background-color: #f5f5f5;
            line-height: 1.6;
        }
        
        .header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 1rem 0;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        
        .nav {
            max-width: 1200px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 20px;
        }
        
        .logo {
            font-size: 24px;
            font-weight: bold;
        }
        
        .nav-links {
            display: flex;
            gap: 30px;
        }
        
        .nav-links a {
            color: white;
            text-decoration: none;
            font-weight: 500;
            transition: opacity 0.3s;
        }
        
        .nav-links a:hover {
            opacity: 0.8;
        }
        
        .user-info {
            display: flex;
            align-items: center;
            gap: 15px;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }
        
        .section-title {
            color: #333;
            margin-bottom: 30px;
            font-size: 28px;
            font-weight: 600;
        }
        
        .card {
            background: white;
            border-radius: 12px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            margin-bottom: 20px;
            overflow: hidden;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        
        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
        }
        
        .card-header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 15px 20px;
            font-weight: 600;
            font-size: 16px;
        }
        
        .card-body {
            padding: 20px;
        }
        
        .btn {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border: none;
            padding: 12px 24px;
            border-radius: 8px;
            cursor: pointer;
            font-weight: 500;
            text-decoration: none;
            display: inline-block;
            transition: all 0.3s ease;
            text-align: center;
        }
        
        .btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
            color: white;
            text-decoration: none;
        }
        
        .btn-sm {
            padding: 8px 16px;
            font-size: 14px;
        }
        
        .btn-secondary {
            background: #6c757d;
        }
        
        .btn-secondary:hover {
            background: #5a6268;
            box-shadow: 0 4px 12px rgba(108, 117, 125, 0.4);
        }
        
        .btn-success {
            background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
        }
        
        .btn-success:hover {
            box-shadow: 0 4px 12px rgba(40, 167, 69, 0.4);
        }
        
        .btn-danger {
            background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
        }
        
        .btn-danger:hover {
            box-shadow: 0 4px 12px rgba(220, 53, 69, 0.4);
        }
        
        .form-group {
            margin-bottom: 20px;
        }
        
        .form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
            color: #333;
        }
        
        .form-group input,
        .form-group select,
        .form-group textarea {
            width: 100%;
            padding: 12px;
            border: 2px solid #e1e5e9;
            border-radius: 8px;
            font-size: 14px;
            transition: border-color 0.3s ease;
        }
        
        .form-group input:focus,
        .form-group select:focus,
        .form-group textarea:focus {
            outline: none;
            border-color: #667eea;
        }
        
        .form-control {
            width: 100%;
            padding: 12px;
            border: 1px solid #ddd;
            border-radius: 8px;
            font-size: 14px;
            transition: border-color 0.3s;
        }
        
        .form-control:focus {
            outline: none;
            border-color: #667eea;
            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
        }
        
        .table {
            width: 100%;
            border-collapse: collapse;
            background: white;
            border-radius: 12px;
            overflow: hidden;
        }
        
        .table th,
        .table td {
            padding: 15px;
            text-align: left;
            border-bottom: 1px solid #e1e5e9;
        }
        
        .table th {
            background: #f8f9fa;
            font-weight: 600;
            color: #333;
        }
        
        .table tr:hover {
            background-color: #f8f9fa;
        }
        
        .badge {
            padding: 6px 12px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 500;
            color: white;
        }
        
        .bg-primary {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }
        
        .bg-success {
            background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
        }
        
        .bg-warning {
            background: linear-gradient(135deg, #ffc107 0%, #fd7e14 100%);
            color: #333;
        }
        
        .bg-danger {
            background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
        }
        
        .bg-secondary {
            background: #6c757d;
        }
        
        .text-muted {
            color: #6c757d;
        }
        
        .text-center {
            text-align: center;
        }
        
        .grid-2 {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
        }
        
        .grid-3 {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 20px;
        }
        
        .grid-4 {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
        }
        
        .alert {
            padding: 15px 20px;
            border-radius: 8px;
            margin-bottom: 20px;
            font-weight: 500;
        }
        
        .alert-success {
            background: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }
        
        .alert-danger {
            background: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
        }
        
        .alert-warning {
            background: #fff3cd;
            color: #856404;
            border: 1px solid #ffeaa7;
        }
        
        .modal {
            display: none;
            position: fixed;
            z-index: 1000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
        }
        
        .modal-content {
            background-color: white;
            margin: 5% auto;
            padding: 0;
            border-radius: 12px;
            width: 90%;
            max-width: 800px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
        }
        
        .modal-header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 20px;
            border-radius: 12px 12px 0 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .modal-header h3 {
            margin: 0;
            font-size: 20px;
        }
        
        .modal-body {
            padding: 20px;
        }
        
        .modal-footer {
            padding: 20px;
            border-top: 1px solid #e1e5e9;
            display: flex;
            justify-content: flex-end;
            gap: 10px;
        }
        
        .close {
            background: none;
            border: none;
            color: white;
            font-size: 24px;
            cursor: pointer;
            padding: 0;
            width: 30px;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            transition: background-color 0.3s ease;
        }
        
        .close:hover {
            background-color: rgba(255, 255, 255, 0.2);
        }
        
        .progress {
            background-color: #e9ecef;
            border-radius: 10px;
            height: 8px;
            overflow: hidden;
        }
        
        .progress-bar {
            height: 100%;
            transition: width 0.3s ease;
            border-radius: 10px;
        }
        
        .screening-card {
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .screening-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
        }
        
        .time-badge {
            font-size: 14px;
            padding: 8px 16px;
        }
        
        .seat-info {
            font-size: 14px;
        }
        
        /* 座位图样式 */
        .seat-map {
            margin: 20px 0;
            text-align: center;
        }
        
        .screen-indicator {
            text-align: center;
            margin-bottom: 20px;
            padding: 8px;
            background: #f1f1f1;
            border-radius: 8px;
            font-weight: bold;
            color: #333;
        }
        
        .seat-row {
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }
        
        .row-label {
            width: 30px;
            text-align: center;
            font-weight: bold;
            color: #666;
        }
        
        .seat {
            display: inline-block;
            width: 30px;
            height: 30px;
            line-height: 30px;
            border-radius: 4px;
            text-align: center;
            cursor: pointer;
            font-size: 12px;
            font-weight: bold;
            transition: all 0.3s ease;
        }
        
        .seat-available {
            background: #6c757d;
            color: white;
        }
        
        .seat-available:hover {
            background: #5a6268;
            transform: scale(1.1);
        }
        
        .seat-occupied {
            background: #dc3545;
            color: white;
            cursor: not-allowed;
        }
        
        .seat-legend {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-top: 20px;
            flex-wrap: wrap;
        }
        
        .legend-item {
            display: flex;
            align-items: center;
            gap: 8px;
            margin: 0 10px;
        }
        
        .legend-seat {
            width: 20px;
            height: 20px;
            border-radius: 3px;
        }
        
        @media (max-width: 768px) {
            .nav {
                flex-direction: column;
                gap: 15px;
            }
            
            .nav-links {
                gap: 15px;
            }
            
            .grid-2 {
                grid-template-columns: 1fr;
            }
            
            .grid-3 {
                grid-template-columns: 1fr;
            }
            
            .grid-4 {
                grid-template-columns: 1fr;
            }
            
            .container {
                padding: 15px;
            }
            
            .modal-content {
                margin: 15% auto;
                width: 95%;
            }
            
            .seat {
                width: 25px;
                height: 25px;
                line-height: 25px;
                font-size: 10px;
            }
            
            .seat-legend {
                gap: 10px;
            }
        }
    </style>
</head>
<body>
    <header class="header">
        <nav class="nav">
            <div class="logo">🎬 前台控制台</div>
            <div class="nav-links">
                <a href="/receptionist/dashboard">控制台</a>
                <a href="/receptionist/movies">影片信息</a>
                <a href="/receptionist/screenings">场次信息</a>
                <a href="/receptionist/sell-ticket">售票功能</a>
                <a href="/receptionist/refund-ticket">退票功能</a>
                <a href="/receptionist/sold-tickets">已售票据</a>
            </div>
            <div class="user-info">
                <span th:text="|前台：${session.user != null ? session.user.username : '未登录'}|">前台</span>
                <a href="/auth/logout" class="btn btn-sm">退出登录</a>
            </div>
        </nav>
    </header>

    <div class="container">
        <h2 class="section-title">📅 场次信息 <span class="badge bg-success" th:text="${#lists.size(screenings)}">0</span></h2>

        <!-- 筛选和操作 -->
        <div class="grid-2">
            <div class="card">
                <div class="card-header">
                    🔍 筛选场次
                </div>
                <div class="card-body">
                    <form action="/receptionist/screenings" method="get" style="display: flex; gap: 10px; align-items: center; flex-wrap: wrap;">
                        <select class="form-control" name="period" style="flex: 1; min-width: 120px;">
                            <option value="today" th:selected="${period == 'today'}">今日</option>
                            <option value="3days" th:selected="${period == '3days'}">近3日</option>
                            <option value="week" th:selected="${period == 'week'}">近一周</option>
                        </select>
                        <select class="form-control" name="movieId" style="flex: 1; min-width: 120px;">
                            <option value="">所有影片</option>
                            <option th:each="movie : ${movies}" 
                                    th:value="${movie.movieId}" 
                                    th:text="${movie.title}"
                                    th:selected="${selectedMovieId != null && selectedMovieId == movie.movieId}">
                            </option>
                        </select>
                        <select class="form-control" name="roomId" style="flex: 1; min-width: 120px;">
                            <option value="">所有放映厅</option>
                            <option th:each="room : ${rooms}" 
                                    th:value="${room.roomId}" 
                                    th:text="${room.roomName}"
                                    th:selected="${selectedRoomId != null && selectedRoomId == room.roomId}">
                            </option>
                        </select>
                        <button type="submit" class="btn">
                            🔍 筛选
                        </button>
                    </form>
                </div>
            </div>
            <div class="card">
                <div class="card-header">
                    ⚡ 快速操作
                </div>
                <div class="card-body text-center">
                    <a href="/receptionist/screenings" class="btn btn-secondary" style="margin-right: 10px;">
                        📋 显示全部
                    </a>
                    <a href="/receptionist/sell-ticket" class="btn btn-success">
                        🎫 售票功能
                    </a>
                </div>
            </div>
        </div>

        <!-- 场次列表 -->
        <div class="card">
            <div class="card-header">
                📋 场次列表 <span class="badge bg-primary" th:text="${#lists.size(screenings)}">0</span>
            </div>
            <div class="card-body">
                <div style="overflow-x: auto;">
                    <table class="table">
                        <thead>
                            <tr>
                                <th>场次ID</th>
                                <th>影片</th>
                                <th>放映厅</th>
                                <th>放映时间</th>
                                <th>票价</th>
                                <th>座位状态</th>
                                <th>售票状态</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr th:each="screening : ${screenings}">
                                <td th:text="${screening.id}"></td>
                                <td>
                                    <strong th:text="${screening.movie.title}"></strong>
                                    <br>
                                    <small class="text-muted" th:text="${screening.movie.duration} + '分钟'"></small>
                                </td>
                                <td th:text="${screening.room.name}"></td>
                                <td>
                                    <span th:text="${#temporals.format(screening.startTime, 'MM-dd HH:mm')}"></span>
                                    <br>
                                    <small class="text-muted" th:text="${#temporals.format(screening.startTime, 'EEEE')}"></small>
                                </td>
                                <td>
                                    <span class="badge bg-success" th:text="|¥${screening.price}|"></span>
                                </td>
                                <td>
                                    <div style="background-color: #e9ecef; border-radius: 10px; height: 20px; position: relative; overflow: hidden;">
                                        <!-- 显示占用率进度条，与模态框保持一致 -->
                                        <div th:with="occupiedSeats=${screening.room.totalSeats - availableSeatsMap[screening.id]}, occupancyRate=${occupiedSeats * 100 / screening.room.totalSeats}"
                                             th:style="|width: ${occupancyRate}%; background: ${occupancyRate >= 80 ? '#dc3545' : (occupancyRate >= 50 ? '#ffc107' : '#28a745')}; height: 100%; border-radius: 10px; transition: width: 0.3s;|"></div>
                                        <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 12px; font-weight: bold; color: #333;"
                                             th:with="occupiedSeats=${screening.room.totalSeats - availableSeatsMap[screening.id]}, occupancyRate=${occupiedSeats * 100 / screening.room.totalSeats}"
                                             th:text="|${#numbers.formatInteger(occupancyRate, 0)}%|"></div>
                                    </div>
                                    <small class="text-muted" th:text="|${availableSeatsMap[screening.id]}/${screening.room.totalSeats} 可用|"></small>
                                </td>
                                <td>
                                    <span th:if="${availableSeatsMap[screening.id] == screening.room.totalSeats}" class="badge bg-success">✅ 未售票</span>
                                    <span th:if="${availableSeatsMap[screening.id] > 0 && availableSeatsMap[screening.id] < screening.room.totalSeats}" class="badge bg-warning">⏰ 部分售出</span>
                                    <span th:if="${availableSeatsMap[screening.id] == 0}" class="badge bg-danger">❌ 已售罄</span>
                                </td>
                                <td>
                                    <button type="button" class="btn btn-sm" 
                                            onclick="viewScreeningDetails(this)" 
                                            th:data-screening-id="${screening.id}"
                                            th:data-movie-title="${screening.movie.title}"
                                            th:data-room-name="${screening.room.name}"
                                            th:data-screening-time="${#temporals.format(screening.startTime, 'yyyy-MM-dd HH:mm')}"
                                            th:data-price="${screening.price}"
                                            th:data-available-seats="${availableSeatsMap[screening.id]}"
                                            th:data-total-seats="${screening.room.totalSeats}" style="margin-right: 5px;">
                                        👁️ 查看
                                    </button>
                                    <a th:href="@{/receptionist/sell-ticket(screeningId=${screening.id})}" class="btn btn-sm btn-success">
                                        🎫 售票
                                    </a>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                
                <div th:if="${#lists.isEmpty(screenings)}" class="text-center" style="padding: 40px 0;">
                    <div style="font-size: 48px; margin-bottom: 20px;">📅</div>
                    <p class="text-muted">暂无场次数据</p>
                </div>
            </div>
        </div>
    </div>

    <!-- 场次详情模态框 -->
    <div class="modal" id="screeningDetailModal">
        <div class="modal-content" style="max-width: 800px;">
            <div class="modal-header">
                <h3>🎬 场次详情</h3>
                <span class="close" onclick="closeScreeningDetailModal()">&times;</span>
            </div>
            <div class="modal-body">
                <div class="grid-2" style="margin-bottom: 30px;">
                    <div class="card">
                        <div class="card-header">ℹ️ 基本信息</div>
                        <div class="card-body">
                            <div style="margin-bottom: 10px;">
                                <strong>影片名称:</strong>
                                <span id="detailMovieTitle" style="font-weight: bold;">-</span>
                            </div>
                            <div style="margin-bottom: 10px;">
                                <strong>放映厅:</strong>
                                <span id="detailRoomName">-</span>
                            </div>
                            <div style="margin-bottom: 10px;">
                                <strong>放映时间:</strong>
                                <span id="detailScreeningTime">-</span>
                            </div>
                            <div style="margin-bottom: 10px;">
                                <strong>票价:</strong>
                                <span style="color: #28a745; font-weight: bold;">¥<span id="detailPrice">0</span></span>
                            </div>
                        </div>
                    </div>
                    <div class="card">
                        <div class="card-header">📊 座位统计</div>
                        <div class="card-body">
                            <div class="grid-3" style="text-align: center; margin-bottom: 20px;">
                                <div class="card" style="background: #f8f9fa;">
                                    <div class="card-body" style="padding: 10px;">
                                        <h5 style="color: #667eea; margin-bottom: 5px;" id="detailTotalSeats">0</h5>
                                        <small style="color: #6c757d;">总座位</small>
                                    </div>
                                </div>
                                <div class="card" style="background: #f8f9fa;">
                                    <div class="card-body" style="padding: 10px;">
                                        <h5 style="color: #28a745; margin-bottom: 5px;" id="detailAvailableSeats">0</h5>
                                        <small style="color: #6c757d;">可用</small>
                                    </div>
                                </div>
                                <div class="card" style="background: #f8f9fa;">
                                    <div class="card-body" style="padding: 10px;">
                                        <h5 style="color: #dc3545; margin-bottom: 5px;" id="detailOccupiedSeats">0</h5>
                                        <small style="color: #6c757d;">已售</small>
                                    </div>
                                </div>
                            </div>
                            <div>
                                <div class="progress" style="height: 20px; position: relative;">
                                    <div class="progress-bar" id="detailProgressBar" style="width: 0%; background: #dc3545; height: 100%; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: white; font-weight: bold;">
                                        <span id="detailOccupancyRate">0%</span>
                                    </div>
                                </div>
                                <small style="color: #6c757d;">座位占用率</small>
                            </div>
                        </div>
                    </div>
                </div>
                    
                    <div id="seatMapContainer">
                        <h6 class="text-primary">座位分布图</h6>
                        <div class="text-center mb-3">
                            <span class="badge bg-secondary me-2">
                                <i class="fas fa-square me-1"></i>可选座位
                            </span>
                            <span class="badge bg-danger me-2">
                                <i class="fas fa-square me-1"></i>已售座位
                            </span>
                            <span class="badge bg-warning">
                                <i class="fas fa-square me-1"></i>维修座位
                            </span>
                        </div>
                        <div id="seatMap" class="text-center">
                            <div class="spinner-border text-primary" role="status">
                                <span class="visually-hidden">加载中...</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" onclick="closeScreeningDetailModal()">关闭</button>
                <button type="button" class="btn btn-success" onclick="goToSellTickets()">
                    🎫 立即售票
                </button>
            </div>
        </div>
    </div>

    <script>
        let currentScreeningId = null;
        
        function viewScreeningDetails(card) {
            currentScreeningId = card.getAttribute('data-screening-id');
            const movieTitle = card.getAttribute('data-movie-title');
            const roomName = card.getAttribute('data-room-name');
            const screeningTime = card.getAttribute('data-screening-time');
            const price = card.getAttribute('data-price');
            const availableSeats = parseInt(card.getAttribute('data-available-seats'));
            const totalSeats = parseInt(card.getAttribute('data-total-seats'));
            const occupiedSeats = totalSeats - availableSeats;
            const occupancyRate = Math.round((occupiedSeats / totalSeats) * 100);
            
            // 填充基本信息
            document.getElementById('detailMovieTitle').textContent = movieTitle;
            document.getElementById('detailRoomName').textContent = roomName;
            document.getElementById('detailScreeningTime').textContent = screeningTime;
            document.getElementById('detailPrice').textContent = price;
            
            // 填充座位统计
            document.getElementById('detailTotalSeats').textContent = totalSeats;
            document.getElementById('detailAvailableSeats').textContent = availableSeats;
            document.getElementById('detailOccupiedSeats').textContent = occupiedSeats;
            document.getElementById('detailOccupancyRate').textContent = occupancyRate + '%';
            
            // 更新进度条
            const progressBar = document.getElementById('detailProgressBar');
            progressBar.style.width = occupancyRate + '%';
            if (occupancyRate >= 80) {
                progressBar.style.background = '#dc3545';
            } else if (occupancyRate >= 50) {
                progressBar.style.background = '#ffc107';
            } else {
                progressBar.style.background = '#28a745';
            }
            
            // 加载座位图
            loadSeatMap(currentScreeningId);
            
            document.getElementById('screeningDetailModal').style.display = 'block';
        }
        
        function closeScreeningDetailModal() {
            document.getElementById('screeningDetailModal').style.display = 'none';
        }
        
        function loadSeatMap(screeningId) {
            if (!screeningId) {
                document.getElementById('seatMapContainer').innerHTML = 
                    '<div class="alert alert-warning">⚠️ 无效的场次ID</div>';
                return;
            }
            
            const seatMapDiv = document.getElementById('seatMap');
            seatMapDiv.innerHTML = '<div class="spinner-border text-primary" role="status"><span class="visually-hidden">加载中...</span></div>';
            
            fetch(`/api/screenings/${screeningId}/seats`)
                .then(response => {
                    if (!response.ok) {
                        throw new Error(`HTTP error! status: ${response.status}`);
                    }
                    return response.json();
                })
                .then(data => {
                    const seatMapDiv = document.getElementById('seatMap');
                    if (data && data.success) {
                        if (data.rows && data.seatsPerRow && Array.isArray(data.occupiedSeats)) {
                            seatMapDiv.innerHTML = generateSeatMap(data.rows, data.seatsPerRow, data.occupiedSeats);
                        } else {
                            seatMapDiv.innerHTML = '<div class="alert alert-warning">⚠️ 座位数据不完整</div>';
                        }
                    } else {
                        const errorMsg = data && data.message ? data.message : '无法加载座位信息';
                        seatMapDiv.innerHTML = `<div class="alert alert-warning">⚠️ ${errorMsg}</div>`;
                    }
                })
                .catch(error => {
                    console.error('Error loading seat map:', error);
                    document.getElementById('seatMap').innerHTML = 
                        '<div class="alert alert-danger">❌ 加载座位信息时发生网络错误，请稍后重试</div>';
                });
        }
        
        function generateSeatMap(rows, seatsPerRow, occupiedSeats) {
            let html = '<div class="seat-map">';
            html += '<div class="screen-indicator">📺 银幕</div>';
            
            // 生成座位图
            for (let row = 1; row <= rows; row++) {
                html += `<div class="seat-row">`;
                html += `<span class="row-label">${String.fromCharCode(64 + row)}</span>`; // A, B, C...
                
                for (let seat = 1; seat <= seatsPerRow; seat++) {
                    const seatNumber = `${String.fromCharCode(64 + row)}${seat}`; // A1, A2, B1, B2...
                    const isOccupied = occupiedSeats.includes(seatNumber);
                    const seatClass = isOccupied ? 'seat-occupied' : 'seat-available';
                    html += `<span class="seat ${seatClass}" title="${seatNumber}座">${seat}</span>`;
                }
                
                html += '</div>';
            }
            
            html += '<div class="seat-legend" style="margin-top: 20px; text-align: center;">';
            html += '<span class="legend-item"><span class="seat seat-available"></span> 可选</span>';
            html += '<span class="legend-item"><span class="seat seat-occupied"></span> 已售</span>';
            html += '</div>';
            html += '</div>';
            
            return html;
        }
        
        function goToSellTickets() {
            if (currentScreeningId) {
                window.location.href = `/receptionist/sell-ticket?screeningId=${currentScreeningId}`;
            } else {
                window.location.href = '/receptionist/sell-ticket';
            }
        }
    </script>
</body>
</html>